<!-- 竖式图片 -->
<template>
	<view class="container">
		<navigator :url="`${urlName}id=${urlId}`" class="nav">

			<image :class="['image',{mohu:episode}]" lazy-load :src="images"></image>
			<view class="navbar" v-if="biao">{{biao}}</view>
			<view class="navbar-right">{{type}}</view>

			<view class="bifen">
				<view>{{bifen}}</view>
				<view class="bifen-sort" v-if="episode">
					{{episode}}{{episodes == episode ? ' 集全' :' / ' + episodes + ' 集'  }}
				</view>
			</view>

		</navigator>
		<!-- 下部带标题与标签 -->
		<view class="srcoll-content">
			<view class="content-cont">{{name}}</view>
			<view class="content-tags">
				<text v-for="tag in tags">{{tag.name}}&nbsp;&nbsp;</text>
			</view>
		</view>

		<view class="checkbox" v-if="checkbox">
			<radio-group @change="checkboxChange" :data-index="index">
				<radio color="#ff0000" :value="index" />
			</radio-group>
		</view>

	</view>
</template>

<script setup>
	const emit = defineEmits("checkbox");
	defineProps({
		urlId: {
			type: String,
			default: ''
		},
		urlName: {
			type: String,
			default: '/pages/play/play?'
		},
		images: {
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: ''
		},
		biao: {
			type: String,
			default: ''
		},
		tags: {
			type: Object,
			default: {}
		},
		bifen: {
			type: Number,
			default: null
		},
		sort: {
			type: String,
			default: ''
		},
		episode: {
			type: Number,
			default: null
		},
		episodes: {
			type: Number,
			default: null
		},
		index: {
			type: Number,
			default: ''
		},
		checkbox: {
			type: Boolean,
			default: false
		}
	})

	function checkboxChange(e) {
		console.log("checkboxChange:", e);
		emit("checkbox", e.detail.value)
	}
</script>

<style scoped lang="scss">
	.container {
		.nav {
			height: 300rpx;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			width: 100%;

			.image {
				width: 100%;
				height: 100%;
				object-fit: cover;
				background: #969696;
			}

			.mohu {
				-webkit-mask-image: linear-gradient(rgb(255, 255, 255), 90%, transparent);

			}

			.navbar {
				position: absolute;
				top: 0;
				font-size: 18rpx;
				font-weight: bold;
				background: rgba(0, 0, 0, 0.2);
				backdrop-filter: blur(20rpx);
				padding: 8rpx 15rpx;
				transform: scale(0.8);
				transform-origin: left top;
				border-top-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
			}

			.navbar-right {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 18rpx;
				font-weight: bold;
				padding: 8rpx 15rpx;
				transform: scale(0.8);
				transform-origin: right top;
			}

			.bifen {
				position: absolute;
				bottom: 0;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 15rpx;

				.bifen-sort {
					font-size: 18rpx;
				}
			}
		}

		.srcoll-content {
			padding: 10rpx 20rpx;

			.content-cont {
				width: 90%;
				font-size: 20rpx;
				font-weight: bold;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.content-tags {
				display: flex;
				flex-wrap: nowrap;
				font-size: 16rpx;
				color: $App-min-text-color;

			}

		}
	}
</style>